import { useState, useEffect, useMemo, useContext } from 'react'
import { resourcePath } from '../../../utils/resource';
import GlobalContext from '../../../utils/GlobalContext';
import DarkCard from '../DarkCard';
const panels = [];
export default function PanelRight(props) {
    const { children, mix } = props;
    const key = useMemo(() => {
        return `panel-${Math.random().toString().substring(3)}`
    }, [])

    const { setGlobalConfig, currentPanelKey } = useContext(GlobalContext);

    useEffect(() => {
        setGlobalConfig(config => {
            return {
                ...config,
                currentPanelKey: key
            }
        })
    }, [setGlobalConfig, key]);

    if (!mix && currentPanelKey !== key) {
        return null;
    }
    return <div style={{
        position: 'absolute',
        right: 0,
        width: 600,
        top: 0,
        bottom: 0,
        background: `url(${resourcePath.panelRightPng})`,
        // background: "linear-gradient(to right, #003265ee, #00326500)",
        zIndex: 1,
        pointerEvents: 'none'
    }}>
        <div className={`layout-v ${props.className}`} style={{
            width: 400,
            overflow: "auto",
            position: "absolute",
            right: 20,
            top: 8,
            bottom: 20,
            pointerEvents: 'auto',
            // height: 300,
            ...props.style
        }}>
            {props.children}
        </div>

    </div>;
    // return <DarkCard className="layout-v" right style={{
    //     width: 350,
    //     overflow: "auto",
    //     position: "absolute",
    //     right: 20,
    //     top: 20,
    //     bottom: 20,
    //     ...props.style
    //     // height: 300
    // }}>
    //     {props.children}
    // </DarkCard>
}